<script setup>
import {reactive, ref} from "vue";

import {userStore} from '@pi/user';

let user = userStore();
let formRef = ref(null);
let form = reactive({account: '', password: '', role: 0});
let rules = reactive({
    account: {required: true, message: '请输入账号', trigger: 'blur'},
    password: {required: true, message: '请输入密码', trigger: 'blur'},
    role: {required: true, message: '请选择角色', trigger: 'blur'},
})

function submit() {
    formRef.value.validate(res => {
        if (res) {
            user.login(form);
        }
    })
}
</script>

<template>
    <div class="login">
        <div class="box">
            <h2 class="title">农职院宿管系统</h2>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="80">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="form.account" :maxlength="32" clearable placeholder="请输入账号"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" :maxlength="32" clearable placeholder="请输入密码"/>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-radio-group v-model="form.role">
                        <el-radio :value="0">管理员</el-radio>
                        <el-radio :value="1">宿管部成员</el-radio>
                        <el-radio :value="2">学生</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit" style="width: 100%;" v-loading="user.loading">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped lang="less">
.login {
    .size();
    .bg_i('@img/bg.jpg');
    .pos_r();
    .box {
        .size(400px, 400px);
        .padd(50px, 20px);
        .pos_a();
        .tran_t();
        .bg(rgba(255, 255, 255, 0.6));
        .bor_r(6px);
        backdrop-filter: blur(10px);
        .title {
            .c(var(--el-color-primary));
            .tac();
            .mar_b(50px);
        }
    }
}
</style>